<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>props</title>
</head>
<body>
  <div id="app">
    这是根组件直接使用-》{{message}}
    <cpn :cinfo="info" :child-my-message="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>来自父组件的 {{childMyMessage}}</h2>
      <h2>来自父组件的 {{cinfo}}</h2>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const cpn = {            //子组件
      template: '#cpn',
      props: {     //接受来自父组件的info
        cinfo: {     //这里不能是驼峰表示，因为v-bind不支持驼峰,驼峰要改成用-连接
          type: Object,
          default() {
            return {}
          }
        },
        childMyMessage: {
          type: String,
          default: '默认值'
        }
      }
    }
    
    const app = new Vue({     //父组件
      el: '#app',
      data: {
        message: '你好',
        info: {
          name: 'yuhao',
          age: 12,
          height: 188
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>
</html>